<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
		 
        article {
            width: 800px;
            margin: 0 auto;
            border: 4px solid #ff5e3a;
            padding: 30px;
        }

        .playerTimeControlBox span {
            width: 10%;
        }

        .playerTimeControlBox input {
            width: 80%;
        }

        .lrcBox {
            min-height: 44px;
        }

        .volumeRange {
            width: 100%;
        }

        input {
            border: none;
            outline-style: none;
        }
		.songName{
			 width: 80px;
			 margin: 0 auto;
			 /*border: 1px solid red;*/
		}
		 /*.playerControlBox :nth-child(3)*/
		/*input:first-child*/
		</style>
	</head>
	<body>
		<article>
    <h1 class="songName">歌名</h1>

    <section class="lrcBox"></section>

    <section class="playerTimeControlBox">
        <span>00:00</span>
        <input type="range" value="0">
        <span>00:00</span>
    </section>
    <section class="playerControlBox">
        <input type="image" width="30px" src="res/img/single.png">
        <input type="image" src="res/img/skip_last.png" width="40px">
        <input type="image" src="res/img/play.png" width="40px">
        <input type="image" src="res/img/skip_next.png" width="40px">
    </section>

    <input type="range" class="volumeRange" value="100">
</article>
	<!--引入的顺序，哪个文件里面引入了谁，谁就先在这个文件里面执行-->
	<!--核心文件--》主类型--》最外面，从最里面往外面开始写的顺序-->
	<script src="LRCReader.js" type="text/javascript" charset="utf-8"></script>
	<script src="TimerTools.js" type="text/javascript" charset="utf-8"></script>
	<script src="AudioPlayer.js" type="text/javascript" charset="utf-8"></script>
	<script src="Player.js" type="text/javascript" charset="utf-8"></script>
	<script src="app.js" type="text/javascript" charset="utf-8"></script>
	
	
	</body>
</html>
